<template>
  <div></div>
</template>

<script setup>
import { DrawCircle, DrawLine, DrawPolygon, DrawRect } from '@antv/l7-draw'
import { inject, onBeforeUnmount, onMounted } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'
const { scene, map } = inject('mapscene')
let drawer = null
onMounted(() => {
  map.flyTo({
    center: [114.26, 30.5],
    zoom: 6,
    speed: 1,
    pitch: 0,
  })
})
// 在路由跟新时拿到params参数
onBeforeRouteUpdate(to => {
  const { type } = to.params
  console.log(type)
  draw(type)
})
// 绘制函数
const draw = type => {
  // 销毁之前的画笔
  cleatDraw()
  //根据不同的type创建不同的画笔
  switch (type) {
    case 'line':
      drawer = new DrawLine(scene, {
        distanceOptions: {}, // 距离测量参数
      })
      break
    case 'rect':
      drawer = new DrawRect(scene, {
        areaOptions: {}, // 面积测量参数
      })
      break
    case 'circle':
      drawer = new DrawCircle(scene, {
        areaOptions: {}, // 面积测量参数
      })
      break
    case 'polygon':
      drawer = new DrawPolygon(scene, {
        areaOptions: {}, // 面积测量参数
      })
  }
  // 开启绘制
  drawer.enable()
}
// 销毁画笔函数
const cleatDraw = () => {
  if (drawer) {
    drawer.destroy()
    drawer = null
  }
}
//组件销毁时销毁画笔
onBeforeUnmount(() => {
  cleatDraw()
})
</script>
<style lang="scss" scoped></style>
